<template>
    <div class="message-container">
        <!-- <h1>{{msg}}</h1> -->
        <ul class="msg-list">
            <li
                v-for="(item,index) in list"
                :key="index"
            >
                <img
                    src="/static/images/banner-01.png"
                    alt=""
                >
                <p>{{item}}-{{index}}</p>
            </li>

        </ul>
    </div>
</template>
<script>
export default {
    data() {
        return {
            msg: "消息中心",
            list: [
                "养生专家59岁去世",
                "西安扫黑办主任被带走",
                "只养天鹅不养猪",
                "西安楼市又出新政策"
            ]
        };
    },
    methods: {},
    created() {
        console.log("数据初始化完毕");
    },
    mounted() {
        console.log("页面渲染完毕");
    }
};
</script>
<style lang="scss">
// 导入公共样式
@import './static/styles/reset.scss';
.message-container {
    background-color: $bgColor;
    .msg-list {
        list-style: none;
        font-size: 35rpx;
        > li {
            background-color: #fff;
            margin: 20rpx 0;
            padding:10rpx;
            p {
                padding: 20rpx;
            }
            img {
                width: 100%;
                height: 260rpx;
                border-radius: 8rpx;
            }
        }
    }
}
</style>


